<script setup lang="ts">
import { ref, reactive } from 'vue'
import { cloneDeep } from 'lodash-es'
/**
 *  弹框
 * */
const state = reactive({
  show: false,
})
const info = ref({
  id: '',
  params: '',
  createBy: '',
  userAgent: '',
  createTime: '',
  method: '',
  exception: '',
  remoteAddr: '',
  requestUri: '',
  serviceId: '',
  time: '',
  title: '',
})
const open = async (row) => {
  info.value = cloneDeep(row)
  state.show = true
}
const showChange = (status: boolean) => {
  state.show = status
}
defineExpose({
  open,
})
</script>
<template>
  <n-drawer
    v-model:show="state.show"
    :width="950"
    placement="right"
    style="--n-body-padding: 0"
    @on-update:show="showChange"
  >
    <n-drawer-content body-content-class="diy-draw-content" closable>
      <template #header>
        <div class="drawer-nav">
          <div class="title">日志详情</div>
        </div>
      </template>
      <div class="con">
        <div class="row">
          <n-grid x-gap="12" :cols="3">
            <n-gi :span="12">
              <div class="row-item">
                <div>请求参数:</div>
              </div>
              <div class="daima">
                <n-code v-if="info.params" :code="info.params" word-wrap language="JavaScript" />
              </div>
            </n-gi>
            <n-gi :span="12">
              <div class="row-item">
                <div>userAgent:</div>
              </div>
              <div class="daima">
                <n-code
                  v-if="info.userAgent"
                  :code="info.userAgent"
                  word-wrap
                  language="JavaScript"
                />
              </div>
            </n-gi>
            <n-gi :span="12">
              <div class="row-item">
                <div>异常信息:</div>
              </div>
              <div class="daima">
                <n-code
                  v-if="info.exception"
                  :code="info.exception"
                  word-wrap
                  language="JavaScript"
                />
              </div>
            </n-gi>
          </n-grid>
        </div>
      </div>
    </n-drawer-content>
  </n-drawer>
</template>

<style lang="scss">
.n-drawer-header__main {
  width: 100% !important;
}
</style>

<style scoped lang="scss">
.drawer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .close {
    cursor: pointer;
  }
}
.con {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  .yue {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding-bottom: 5px;
  }
  .row {
    padding-bottom: 24px;
    .row-item {
      display: flex;
      margin-top: 20px;
      div {
        font-size: 13px;
        &:first-child {
          margin-right: 5px;
        }
      }
      &-value {
        flex: 1;
      }
    }
    .daima {
      margin-top: 10px;
      padding: 10px;
      box-sizing: border-box;
      border: 2px solid #f2f2f2;
    }
  }
}
</style>
<style lang="scss">
.diy-draw-content {
  display: flex;
  flex-direction: column;
}
.diy-wrapper-class {
  flex: 1;
  display: flex;
  flex-direction: column;
  .n-tab-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
</style>
